Code Garden

Appearance

Vue-05 过渡效果、生命周期 ​

一、过渡效果 ​

  • 定义动画 类
css
/* 定义进入和离开时候的过渡状态 */
.v-enter-active, .v-leave-active {
  transition: opacity .5s;
}
/* 定义进入过渡的开始状态和离开过渡的结束状态 */
.v-enter, .v-leave-to {
  opacity: 0;
}
  • 使用vue内置的transition标签把需要动画控制的元素包裹起来
html
<transition>
    <div v-if='show'></div>
</transition>

image

图中可见：

v-enter和v-leave-to的样式是一样的，可以写成一组样式

v-enter-to和v-leave的样式是一样的，可以写成一组样式

  • 四个时间点
    • v-enter：进入之前元素的起始状态，还没进入
    • v-enter-to：定义进入过渡结束状态
    • v-leave：定义离开过渡的开始状态；
    • v-leave-to：离开之后离开的终止状态，动画已经结束了；
  • 两个时间段，在时间段设置过渡等等
    • v-enter-active：进入动画的时间段发生的事情
    • v-leave-active：离开动画的时间段发生的事情

列表渲染 ​

在使用v-for循环时，需要使用transition-group标签包裹li，如果要为v-for循环动画时，必须为每一个元素

html
<ul>
    <transition-group>
        <li v-for='...'></li>
    </transition-group>
</ul>

为列表删除定义移除的动画（固定写法）

css
.v-move{
    transition:all .6s ease;
}
.v-leave-active{
    position: absolute;
}

给transition-group添加appear属性，实现页面刚展示出来的入场动画；因为transition-group标签被渲染成了span标签，可以添加一个tag转换ul标签包裹；

html
<transition-group appear tag='ul'></..>

过渡的自定义 ​

自定义前缀 ​

  • 定义样式中v是css中定义样式名字的开头，使用时在transition标签写上name名字
  • 前缀的作用：区分不同组件的动画；不同的组件使用不同的动画
html
<transition name='fade'></transition>
.fade-enter,.fade-leave-to{
	opacity: 0
}

自定义过渡类名 ​

  • enter-class
  • enter-active-class
  • enter-to-class
  • leave-class
  • leave-active-class
  • leave-to-class

动画钩子 ​

使用类名的动画都无法设置半场的动画，需要用到动画钩子，使用动画钩子不需要再设置样式，在methods里面定义；

半场动画：

原来动画分为进入和离开，两场动画，半场动画只有进入的状态就消失了，每次点一下就显示隐藏了

每个钩子对应一个事件，事件的第一个参数：el，表示要执行动画的那个dom元素；js原生的dom元素；动画钩子事件添加到transition标签里

  • @before-enter='beforeEnter' 进入之前，

    动画尚未开始，可以在这里设置元素动画之前的起始样式；

  • @enter='enter' 进入

    这里可以设置动画起始完成之后的状态，enter和leave事件过渡的时候，回调函数必须有第二个参数，done，

  • @after-enter='afterEnter' 进入之后

    动画完成之后执行的函数，该函数执行有延迟，需要在上一个函数进入调用一次；

  • @enter-cancelled='enterCancelled' 进入取消（一般用不到）；

v-on:before-leave='beforeleave'

v-on:leave='leave'

v-on:after-ente='afterleave'

v-on:leave-cancelled='leaveCancelled'

简单的例子 ​

js
beforeEnter (el) {
    el.style.transform='translate(0,0)';
}
enter (el, done) {
    el.offsetWidth  //如果没有动画效果，设置这行代码，可以进行动画，或offsetHeight/top/right都行;
    el.style.transform='translate(0,0)';
    el.style.transition = 'all 1s ease';
    done()  //必须要调用一次，否则会出现延迟的情况; 相当于afterenter事件,立即调用最后一个事件;
}
afterEnter (el) {
    this.flag = !this.flag;  //进入之后让元素隐藏;
}

使用animate.css动画库 ​

  • 引入animate.css文件
  • 直接在transition标签上写动画名称
html
<transition 
    leave-active-class='animated fadeOutDown' 
    enter-active-class='animated flipInX'>
          <a href="" v-show="isShow">Baidu</a> 
</transition>
  • 使用animate动画库时，只需要定义两个时间段即可
  • animate必须带一个animted的类名

生命周期 ​

什么是生命周期 ​

  • 通常叫作生命周期钩子函数，在经过它的阶段则会触发
    • 什么是生命周期：从vue实例创建、运行、到销毁期间的过程统称为生命周期；
    • 生命周期钩子：就是生命周期事件的别名；
    • 生命周期钩子=生命周期函数=生命周期事件；

生命周期的状态 ​

  • 创建期间的生命周期函数

    • beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好data和methods属性；

    • created：实例已经在内存中创建ok，此时data和methods已经创建ok，还没编译模板，此时还没有el元素；

    • beforeMount：已经完成了模板的编译，可以访问$el，页面还没渲染；

    • mounted：已挂载，页面被渲染；一般在这里调取接口，ajax或axios等等；

      mounted执行完成不一定页面全部被渲染，可以在mounted里面使用this.$nextTick(()=>{})函数，页面渲染完成时执行；

  • 运行期间的生命周期函数

    • beforeUpdate：数据更新时调用，页面还是旧数据，data里是新数据
    • updated：组件DOM已经更新；updated不一定页面全部被重绘，可以使用this.$nextTick
    • activated：keep-alive组件激活时被调用
    • deactivated：keep-alive组件停用时被调用；

  • 销毁期间的生命周期函数

    • beforeDestroy：实例销毁之前调用，在这一步，实例仍然可用
    • destroyed：实例被销毁后调用； 调用后，当前Vue实例与挂载元素断开了，组件中的所有方法都不可用了；

一般不会自动调用销毁事件，如果需要调用销毁事件，可以写一个按键，定义一个函数，在函数内部调用this.$destroy()，进行手动销毁；尽量避免销毁，一般用不上，如果需要销毁，可以手动调用销毁；

捕获错误：errorHandler

image

生命周期图解：

在创建之前Vue初始化，没有其他操作；

在创建之间，依然是初始化，这个时候没有出现el元素，可以访问data；

在创建和挂载之间，做了大量的事情；

首先判断是否有el元素，如果没有，分两个步骤：

  • 没有：那生命周期就结束；

  • 手动调取$mount()这个方法，去挂载el元素，生命周期继续；

如果有el元素，这个时候我们要判断是否有render()这个函数，如果有，优先去渲染它，如果没有，就找template模板对象，如果有就渲染模板内容，如果没有就去找outerHtml，如果都没有就空白；

渲染优先级：reder()函数>template>outerHtml

在挂载之前，出现了el元素，这个时候的dom结构是虚拟dom结构，进行了占位；

在挂载的时候，出现了el元素dom结构内容，替换成了实体内容；

当有子组件时的生命周期（了解之后对数据获取很重要）

父组件created->父组件beforeMounte->子组件created->子组件mounted->父组件mounted

父组件通过异步获取数据，在子组件拿到数据的方法：

  1. 在父组件渲染子组件时添加判断，有数据再渲染子组件
  2. 通过computed事件来处理

清除定时器或者事件监听

由于项目中有些页面难免会碰到需要定时器或者事件监听。但是在离开当前页面的时候，定时器如果不及时合理地清除，会造成业务逻辑混乱甚至应用卡死的情况，这个时就需要清除定时器事件监听，即在页面卸载（关闭）的生命周期函数里，清除定时器。

js
methods:{
  resizeFun () {
    this.tableHeight = window.innerHeight - document.getElementById('table').offsetTop - 128
  },
  setTimer() {
    this.timer = setInterval(() => { })
  },
  clearTimer() {    //清除定时器
        clearInterval(this.timer)
    this.timer = null
    }
},
mounted() {
  this.setTimer()
  window.addEventListener('resize', this.resizeFun)
},
beforeDestroy() {
  window.removeEventListener('resize', this.resizeFun)
  this.clearTimer()
}

脚手架工具Vue-cli ​

  • 安装：npm i -g @vue/cli

  • 生成包

    • 使用图形界面安装：vue ui
    • 使用cmd安装：vue create demo

由于安装node-sass时，会卡住，建议设置下环境

js
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

  • 执行vue serve运行起来

  • 脚手架规范；

    • 组件名字首字母必须大写
    • 冒号后面必须有一个空格
    • 函数名和括号和大括号之间必须有一个空格
    • 每一个文件最后面必须保留一个空行
    • js中要使用单引号，否则报错
    • 一行结尾不应该有分号
    • 判断条件不能使用==，需要使用===
    • 双斜杠注释后面必须留有一个空格

  • 脚手架目录结构

Released under the MIT License.

Copyright © 2022-备案号：京ICP备2022004926号-1